<template>
	<view class="h100">
		<nav-bar title="首页"></nav-bar>
		<u-list @scrolltolower="scrollEnd" :enableFlex="true" :lowerThreshold="350">
			<u-list-item>
				<u-scroll-list @right="storeLoad" :indicator="false">
					<view class="hightlight-item margin-horizontal-10 padding-top-10" @click="goReels(index)"
						v-for="(newitem,index) in Reels" :key="index">
						<view class="image-circle">
							<u-avatar size="55" :src="transreel(newitem)"></u-avatar>
						</view>
						<!-- <text class="text">{{transid(newitem.id)}}</text> -->
						<text class="text">{{transtime(newitem.expiring_at)}}</text>
					</view>
				</u-scroll-list>
			</u-list-item>
			<u-list-item v-for="(item,index) in edges" :key="item.edge_id">
				<ad adpid="1300828862" ad-type="video" :ad-intervals="30"  ad-theme="white" v-if="((index+1) % 4) == 0 && !isVipExpired"></ad>
				<view class="home margin-vertical-10">
					<view class="home-header flex center"
						style="text-align: center;padding:10rpx 0;justify-content: flex-start;"
						@click="goUser(item.user)">
						<u-avatar :src="imageSrc(item.user)" size="34"></u-avatar>
						<text
							style="margin-left: 10rpx;">{{item.user == undefined ? "roses_are_rosie" : item.user}}</text>
					</view>
					<view class="home-content">
						<u-swiper :height="height" :list="childrens(item)" keyName="url" :circular='true' indicator indicatorMode="dot"
							:autoplay="false">
						</u-swiper>
					</view>
					<view class="home-footed" @click="goDetail(item)">
						<text class="two-line-ellipsis">{{transContent(item.edge_media_to_caption)}}</text>
						<text>{{Number(item.edge_liked_by)}}次赞</text>
						<view class="flex" style="justify-content: space-between;">
							<text>共{{Number(item.edge_media_to_comment)}}条评论</text>
							<text>{{transtimes(item.taken_at_timestamp)}}</text>
						</view>
					</view>
					<view @click="inputClick(item.edge_id,index)">
						<u--input placeholder="发表评论" border="bottom" clearable @confirm="send" confirmType="send"
							ref="input"></u--input>
					</view>

				</view>
			</u-list-item>
		</u-list>
	</view>
</template>


<script>
	import HomeItem from "./home-item.vue"
	import Config from "@/common/config.js"
	import {
		getEdge,
		getStore,
		sendComment,
		getConfig,
		wxLogin
	} from "@/api/app/api.js"
	import {
		transformTime
	} from "@/utils/utils.js"
	import {
		weBtoa,
		weAtob
	} from './atob.js'
	export default {
		name: "home-list",
		props: {
			clickFun: Function,
			itemList: Array,
			status: String,
			loadingText: String,
			nomoreText: String
		},
		components: {
			HomeItem
		},
		data() {
			return {
				edges: [],
				Reels: [],
				page: 1,
				storePage: 1,
				curryMediaId: 0,
				curryIndex: 0,
				user_ids: {
					8004108750: "roses_are_rosie",
					8012033210: "lalalalisa_m",
					8011506095: "sooyaaa__",
					7140177628: "jennierubyjane",
					44912816910: "hank_says_hank",
					3253141467: "blackpinkofficial",
					1692800026: "dlwlrma",
					"roses_are_rosie": 8004108750,
					"lalalalisa_m": 8012033210,
					"sooyaaa__": 8011506095,
					"jennierubyjane": 7140177628,
					"hank_says_hank": 44912816910,
					"blackpinkofficial": 3253141467,
					"dlwlrma": 1692800026
				},
				user: {},
				isLoading:false
			}
		},
		methods: {
			scrollEnd() {
				
			},
			goUser(user) {
				console.log(user)
				uni.navigateTo({
					url: `/pages/home/home?user=${user}`
				})
			},
			transContent(content) {
				let con;
				try {
					con = unescape(weAtob(content).replace(/\\u/g, '%u'))
				} catch {
					con = content
				}
				return con
			},
			goDetail(item) {
				uni.navigateTo({
					url: `/subA/detail/detail?edgeId=${item.shortcode}&shortCode=${item.edge_id}&isUser=false`,
				});
			},
			transtimes(val) {
				return transformTime(val)
			},
			inputClick(val, index) {
				console.log('click', val)
				this.curryMediaId = val;
				this.curryIndex = index;
			},
			childrens(item) {
				let items = item.edge_sidecar_to_children.split(';')
				items.pop();
				if(items.length == 0){
					items.unshift(item.shortcode)
				}
				let types = item.edge_sidecar_to_children_type.map(item => item);
				// console.log("types",types)
				if(items.length == 0){
					types.unshift(item.media_type == 2 ? "video" : "img")
				}
				// return []
				return items.map((data, index) => {
					let type = types[index] == 'video' ? ".mp4" : ".jpg"
					return {
						url: Config.base_Url + 'ins_img/' + data + type,
						type: types[index] == 'video' ? 'video' : 'image',
						poster: Config.base_Url + 'ins_img/' + data + '.jpg'
					}
				})
			},
			send(val) {
				let comment = {
					mediaId: this.curryMediaId,
					user_id: this.user.openid,
					text: val,
					type: 'comment',
					created_at_utc: Number(String(+new Date()).slice(0, 10)),
					comment_like_count: 0,
					comment_replay_count: 0,
					username: this.user.username,
					state: 'send',
					isWx: true,
					origin: this.$store.getters.getsysteminfo.uniPlatform,
					user: this.$store.getters.getUser,
					isUser: false
				}
				sendComment(comment).then(res => {
					console.log('res', res)
					uni.showToast({
						title: "评论成功"
					})
					// console.log('this.$refs.input',this.$refs.input)
					this.$refs.input[this.curryIndex].$children[0].onClear()
				}).catch(err => {
					console.log('err', err)
					uni.showToast({
						title: "评论失败"
					})
				})
			},
			async loadEdge() {
				try {
					let page = this.page;
					let response = await getEdge({
						page: page
					})
					console.log(response)
					this.edges.push(...response.data)
					// response.data.forEach(item=>{
					// 	this.edges.push(1)
					// 	console.log(item,this.edges)
					// })
					this.$store.commit(
						"setRoseEdge",
						response.data
					);
					this.page = this.page + 1;
					uni.hideLoading()
				} catch (e) {
					uni.hideLoading()
					console.log('err', e)
					uni.showToast({
						title: "加载失败",
						icon: "error",
						duration: 500
					})
				}
			},
			imageSrc(user) {
				if (user == undefined) {
					user = "roses_are_rosie"
				}
				return Config.base_Url + "ins_img/" + user + "HeadPortrait.jpg"
			},
			storeLoad() {
				uni.showLoading({
					title: "正在加载"
				})
				let page = this.storePage;
				getStore({
					page: page
				}).then(res => {
					console.log('res', res)
					this.Reels.push(...res.data)
					this.storePage = this.storePage + 1;
					uni.hideLoading()
				}).catch(err => {
					console.log('err', err)
					uni.showToast({
						title: "加载store失败",
						icon: "error",
						duration: 500
					})
					uni.hideLoading()
				})
			},
			transid(id) {
				return this.user_ids[id]
			},
			transreel(item) {
				// console.log(Config.base_Url + 'ins_img/' + item.media_ids[0] + '.jpg')
				return Config.base_Url + 'ins_img/' + item.media_ids[0] + '.jpg'
			},
			goReels(index) {
				let data = this.Reels[index];
				uni.navigateTo({
					url: "/subA/hightlight/hightlight",
					success(res) {
						res.eventChannel.emit(
							"videoChannel", {
								data: data,
							}
						);
					},
				});
			},
			transtime(time) {
				// console.log('time:',time)
				let date = new Date(Number(time + '000'));
				// console.log(date.getFullYear(),date.getMonth()+1,date.getDate())
				return date.getFullYear() + '.' + (date.getMonth() + 1) + '.' + (date.getDate() - 1);
			},
		},
		computed: {
			height() {
				console.log('height')
				return this.$store.getters.getsysteminfo.screenWidth
			},
			isVipExpired(){
				console.log('$store.getters.getVipExpired', this.$store.getters.getVipExpired)
				return this.$store.getters.getVipExpired
			}
		},
		onReachBottom(){
			if(!this.isLoading){
				this.isLoading = true;
				console.log("加载更多")
				uni.showLoading({
					title: "正在加载"
				})
				this.loadEdge().then(res=>{
					this.isLoading = false
				}).catch(err=>{
					this.isLoading = false
				})
			}
		},
		onLoad() {
			uni.showLoading({
				title: "加载中"
			})
			wx.login({
				success:async (res)=>{
					let response = await wxLogin({code:res.code})
					console.log('login',response)
					this.$store.commit('setUser', response.data);
					this.user = Object.assign({}, this.user, response.data)
				},
				fail:(err)=>{
					console.log('登录失败',err)
				}
			})
			getConfig().then(res=>{
				console.log('config', res)
				const data = res.data.length > 0 ? res.data[0] : {}
				this.$store.commit('setConfig', {
					...data
				})
			})
			this.storeLoad()
			this.loadEdge()
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		height: 60%;
	}

	.home-content {}

	.home-footed {
		display: flex;
		flex-direction: column;
		padding: 0 10rpx;
		max-width: 100vw;
	}

	.image-circle {
		border: 3rpx solid skyblue;
		padding: 5rpx 5rpx;
		border-radius: 50%;
	}

	.two-line-ellipsis {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.container-middle {
		text-align: center;
		display: flex;
		justify-content: space-between;
		overflow-x: scroll;
		margin-bottom: 10rpx;

		.hightlight-item {
			max-width: 22%;
			padding: 0 17rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-top: 10rpx;
		}
	}

	.text {
		margin-top: 10rpx;
		font-size: 0.8em;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>